<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar :border="false" fixed>
      <template #left>
        <div class="nav-bar-left-div">
          <span @click="linkToRec" :class="$route.path == '/home/rec' ? 'active' : ''">资讯</span>
          <span @click="linkToDyn" :class="$route.path == '/home/dyn' ? 'active' : ''">动态</span>
        </div>
      </template>
      <template #right>
        <van-icon @click="searchClick" name="search" size="24" color="#000" />
        <van-icon @click="envelopClick" name="envelop-o" size="24" color="#000" style="margin-left: 15px;" />
      </template>
    </van-nav-bar>

    <!-- 首页子页面路由占位符 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
    </router-view>

    <back-top></back-top>
  </div>
</template>

<script setup>
import BackTop from '../../components/backTop/backTop.vue';

import router from '../../route/index.js'

// 顶部导航事件 
const searchClick = () => {
  console.log('点击搜索按钮');
}
const envelopClick = () => {
  console.log('点击消息按钮');
}

// 点击跳转到动态页面
const linkToDyn = () => {
  // document.documentElement.scrollTop = 0
  router.push('/home/dyn')
}
// 点击跳转到资讯页面
const linkToRec = () => {
  // document.documentElement.scrollTop = 0
  router.push('/home/rec')
}
</script>

<style scoped>
.nav-bar-left-div {
  display: flex;
  width: 85px;
  justify-content: space-between;
  align-content: center;
  color: #969799;
  font-size: 17px;
  font-weight: 600;
}

.active {
  color: #323233;
  font-size: 18px;
  font-weight: 600;
}
</style>
